<template>
  <div class="basic-from" v-dialogDrag>
    <el-dialog
      custom-class="small-padding-dialog"
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="dialogVisible"
      :width="width"
      @close="handleClosed"
    >
      <el-form
        :model="formData"
        ref="form"
        class="form-wrap"
        style="padding-top:0px;"
        :rules="rules"
      >
        <el-form-item
          :label="item.label"
          :prop="item.key"
          v-for="item in popUpdata"
          :key="item.key"
          :class="item.class"
        >
          <el-input
            v-model="item.value"
            placeholder="请输入"
            :disabled="item.disabled"
            :readonly="item.readonly || type === 'details'"
            v-if="item.type === 'input'"
          />

          <el-input
            v-model="item.value"
            type="number"
            placeholder="请输入"
            :disabled="item.disabled"
            :readonly="item.readonly || type === 'details'"
            v-if="item.type === 'inputNum'"
            @input="()=>inputChange(item)"
          />

          <!-- 字典选择框 -->
          <template v-else-if="item.type === 'dict'">
            <el-select
              clearable
              v-model="item.value"
              placeholder="请选择"
              :disabled="item.disabled  || type === 'details'"
              :multiple="item.multiple"
            >
              <el-option
                v-for="(item, index) in filterList(item.dictName)"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>

          <el-radio-group
            v-model="item.value"
            v-else-if="item.type === 'radio'"
            :disabled="item.disabled"
            :readonly="item.readonly || type === 'details'"
          >
            <el-radio
              :label="data.value"
              v-for="(data, index) in item.options"
              :key="index"
              >{{ data.label }}</el-radio
            >
          </el-radio-group>

          <el-input
            v-model="item.value"
            type="textarea"
            placeholder="请输入"
            :disabled="item.disabled"
            :readonly="item.readonly || type === 'details'"
            v-else-if="item.type === 'textarea'"
          />

          <el-date-picker
            v-model="item.value"
            :type="item.genre"
            :disabled="item.disabled"
            :readonly="item.readonly || type === 'details'"
            placeholder="选择日期"
            v-else-if="item.type === 'time'"
            :value-format="inputFormat(item.genre)"
             @change="()=>inputChange(item)"
          ></el-date-picker>

          <el-select
            clearable
            v-model="item.value"
            placeholder="请选择"
            :disabled="item.disabled || type === 'details'"
            filterable
            v-else-if="item.type === 'select'"
            :multiple="item.multiple"
            
          >
            <el-option
              v-for="data in item.options"
              :key="data.value"
              :label="data.label"
              :value="data.value"
            />
          </el-select>

          <el-input
            v-model="item.secondValue"
            :disabled="item.disabled"
            :readonly="item.readonly || type === 'details'"
            placeholder="请输入"
            v-if="item.label === '隔离类型' && item.value === 5"
          />
        </el-form-item>
      </el-form>

      <slot name="custom"></slot>

      <div slot="footer">
        <el-button v-if="type === 'add'"  type="primary" @click="save"
          >提交</el-button
        >
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/**
 *  @param {string} label   // 表单名称
 *  @param {string} value   // 表单值
 *  @param {string} key   // 表单key值
 * @param {string} footerState   // 底部操作按钮  `
 *  @param {string} type   // 组件类型 input 输入框 select 下拉框  redio 单选框 time 时间  textarea 多文本输入框
 *  @param {Array} options   // 组件类型 select redio 数据
 */
import { getDict } from '@/utils';

export default {
  name: 'hotelDialog',
  inject: ['initList'],
  props: {
    // form表单数据
    popUpdata: {
      type: Array,
      default: () => {
        return [];
      },
    },
    title: {
      type: String,
      default: '查看',
    },
    width: {
      type: String,
      default: '50%',
    },
    footerState: {
      type: Boolean,
      default: true,
    },
    type: {
      type: String,
      default: 'add',
    }
  },
  data() {
    return {
      //弹窗开关
      dialogVisible: false,
      // 表单项
      formData: {},
      // 校验
      rules: {
        // initiator: [{ required: true, message: "上报人不能为空", trigger: "blur" }],
        // initiateTime: [{ required: true, message: "上报时间不能为空", trigger: "blur" }],
        // propertyName: [{ required: true, message: "物业名称不能为空", trigger: "blur" }],
        // problemDesc: [{ required: true, message: "问题描述不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
     // 日期格式化
    inputFormat (value) {
      if (!['date', 'datetime', 'daterange', 'datetimerange', 'year', 'month'].includes(value)) return '';
      switch (value) {
        case 'date':
          return 'yyyy-MM-dd';
        case 'daterange':
          return 'yyyy-MM-dd';
        case 'month':
          return 'MM';
        case 'year':
          return 'yyyy';
        default:
          return 'yyyy-MM-dd HH:mm:ss'
      }
    },
    filterList (name) {
      return getDict(name)
    },
    // 更改弹窗状态
    async changeVisible() {
      this.dialogVisible = !this.dialogVisible;
    },
    // 提交新增
    async save() {
      this.$emit('submit');
    },
    // 弹窗关闭还原
    handleClosed() {
      this.dialogVisible = false;
      this.$emit('close');
    },
    inputChange(item){
      this.$emit('formChange',item)
    }
  },
}
</script>

<style lang="scss" scoped>
.addDialog {
  /deep/ .el-date-editor--datetime {
    width: 100%;
  }
  .album {
    .el-col {
      margin-bottom: 20px;
    }
    .img {
      width: 100%;
      height: 200px;
    }
  }
}
</style>
